<template>
  <view class="dy-scroll-container">
    <dy-navbar title="下拉菜单" />
    <scroll-view class="dy-scroll" scroll-y>
      <dy-card>
        <dy-section slot="title" padding="0" title="基础用法" />
        <template slot="body">
          <dy-dropdown v-model="baseUsed.value">
            <dy-dropdown-item v-model="baseUsed.order" title="综合" :options="orders" />
            <dy-dropdown-item
              v-model="baseUsed.discount"
              title="折扣"
              :options="discounts"
              disabled
            />
            <dy-dropdown-item v-model="baseUsed.type" title="类型" :options="types" />
            <dy-dropdown-item v-model="baseUsed.size" title="尺寸" :options="sizes" />
            <dy-dropdown-item
              v-model="baseUsed.region"
              show-icon
              :icon-option="{ name: 'list' }"
              title="地区"
              :options="regions"
            />
          </dy-dropdown>
        </template>
      </dy-card>
      <dy-card>
        <dy-section slot="title" padding="0" title="自定义插槽" />
        <template slot="body">
          <dy-dropdown ref="custom-slot" v-model="customSlot.value">
            <dy-dropdown-item v-model="customSlot.order" title="综合" :options="orders" />
            <dy-dropdown-item v-model="customSlot.discount" title="折扣" :options="discounts" />
            <dy-dropdown-item v-model="customSlot.type" title="自定义插槽" :options="types">
              <view class="dy-pd-24">
                <!-- 插槽内容 -->
                <dy-grid col="2" gap="24">
                  <dy-grid-item v-for="(type, index) in types" :key="type.id" :index="index">
                    <view
                      class="dy-h-100P dy-flex-column-center dy-pd-tb-20"
                      :class="{ 'dy-bg-fourth dy-white': customSlot.type === type.id }"
                      @tap="handleSelectCustomSlot(type)"
                    >
                      {{ type.text }}
                    </view>
                  </dy-grid-item>
                </dy-grid>
              </view>
              <!-- 插槽内容 End -->
            </dy-dropdown-item>
            <dy-dropdown-item v-model="customSlot.size" title="尺寸" :options="sizes" />
            <dy-dropdown-item
              v-model="customSlot.region"
              show-icon
              :icon-option="{ name: 'list' }"
              title="地区"
              :options="regions"
            />
          </dy-dropdown>
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
import data from './data.js'
export default {
  name: 'DropDown',
  data() {
    return {
      ...data
    }
  },
  methods: {
    handleSelectCustomSlot(type) {
      this.customSlot.type = type.id
      this.$refs['custom-slot'].submit()
    }
  }
}
</script>
